new Vue({
	el: "#app",
	data() {
		return {
			showconsult: true,
			bannerList: [],
			productList: [],
			config: [],
			successCaseList: [],
			newsInforList: [],
			moreNewsInforList: [],
			moreSuccessCaseList: [],
			zhmdysIndex: 0,
			rjjmUserIndex: 0,
			rjjmMpIndex: 0,
			rjjmAdminIndex: 0,
			xtysIndex: 0,
			gnzcIndex: 0,
			rjjmUserTouchX: -1,
			rjjmMpTouchX: -1,
			rjjmAdminTouchX: -1,
			formData: {
				cusIntention: '',
				cusProject: [],
				cusAddress: '',
				cusName: '',
				cusPhone: '',
				verifyCode: ''
			},
			isCountingDown: false,  // 控制倒计时按钮的状态
			countdown: 60,          // 倒计时初始时间
			timer: null,         // 定时器
			zhmdysList: [{
				icon: 'img/zhmdys-1.png',
				title: '24小时营业',
				content: '可做到7×24小时营业，突破传统经营限制，根据营业情况自动开启关闭空调、水电，最大化节约成本；'
			},
			{
				icon: 'img/zhmdys-2.png',
				title: '省人工',
				content: ' 顾客从预定、开门、续订离店、全程自助下单完成，无需雇佣全职人员以及值守，老板可在手机上实时查看门店营收情况；'
			},
			{
				icon: 'img/zhmdys-3.png',
				title: '更私密',
				content: '更符合当下年轻人的消费习惯，顾客可以在手机上提前查看门店环境，包间私密性更强，用户消费黏性更高；'
			},
			{
				icon: 'img/zhmdys-4.png',
				title: '促消费',
				content: '除了房间消费外，还可以提供自助泡茶、无人售货机、自助点餐、烟酒茶水在线订购等，增加门店的营业额；'
			},
			{
				icon: 'img/zhmdys-5.png',
				title: '易连锁',
				content: '管理经营简便实用，可规模化复制，无人棋牌、麻将、茶室等多种经营形式并存，一个人可以管理10家店；'
			},
			{
				icon: 'img/zhmdys-6.png',
				title: '技术优',
				content: '科技智能化一站式服务，从顾客预订、到店消费、资金结算全程自动化、智能化经营，运作成本和所得利润清晰可见；'
			}
			],
			rjjmUserList: [{
				name: '在线订房',
				icon: 'img/rjjm-user-1.png',
				selectIcon: 'img/rjjm-user-1-s.png',
				description: '顾客可打开小程序，提前查看门店环境和包厢特色，约上三个好友，根据喜好预定房间。',
				content: 'img/rjjm-user-1-c.png',
			},
			{
				name: '自助开门',
				icon: 'img/rjjm-user-2.png',
				selectIcon: 'img/rjjm-user-2-s.png',
				description: '顾客预定成功后，抵达门店后，可自助开门，开包厢，包间私密性更强，用户消费黏性更高。',
				content: 'img/rjjm-user-2-c.png'
			},
			{
				name: '随时续费',
				icon: 'img/rjjm-user-3.png',
				selectIcon: 'img/rjjm-user-3-s.png',
				description: '4个小时还不过瘾，用户可随时线上续单，续单后立即生效，全程自助操作，无需员工收款。',
				content: 'img/rjjm-user-3-c.png'
			},
			{
				name: '吸引消费',
				icon: 'img/rjjm-user-4.png',
				selectIcon: 'img/rjjm-user-4-s.png',
				description: '充值赠送金额，团购优惠卡券，优惠满减券，抖音美团自助消费券一应俱全，吸引客户到店首次和持续消费。',
				content: 'img/rjjm-user-4-c.png'
			}
			],
			rjjmMpList: [{
				name: '在线订房',
				icon: 'img/rjjm-mp-1.png',
				selectIcon: 'img/rjjm-mp-1-s.png',
				description: '顾客可打开小程序，提前查看门店环境和包厢特色，约上三个好友，根据喜好预定房间。',
				content: 'img/rjjm-mp-1-c.png',
			},
			{
				name: '自助开门',
				icon: 'img/rjjm-mp-2.png',
				selectIcon: 'img/rjjm-mp-2-s.png',
				description: '顾客预定成功后，抵达门店后，可自助开门，开包厢，包间私密性更强，用户消费黏性更高。',
				content: 'img/rjjm-mp-2-c.png'
			},
			{
				name: '随时续费',
				icon: 'img/rjjm-mp-3.png',
				selectIcon: 'img/rjjm-mp-3-s.png',
				description: '4个小时还不过瘾，用户可随时线上续单，续单后立即生效，全程自助操作，无需员工收款。',
				content: 'img/rjjm-mp-3-c.png'
			},
			{
				name: '吸引消费',
				icon: 'img/rjjm-mp-4.png',
				selectIcon: 'img/rjjm-mp-4-s.png',
				description: '充值赠送金额，团购优惠卡券，优惠满减券，抖音美团自助消费券一应俱全，吸引客户到店首次和持续消费。',
				content: 'img/rjjm-mp-4-c.png'
			}
			],
			rjjmAdminList: [{
				name: '首页',
				content: 'img/rjjm-admin-1.png'
			},
			{
				name: '收益记录',
				content: 'img/rjjm-admin-2.png'
			},
			{
				name: '店铺管理',
				content: 'img/rjjm-admin-3.png'
			},
			{
				name: '订单管理',
				content: 'img/rjjm-admin-4.png'
			}
			],
			xtysList: [{
				icon: 'img/xtys-1.png',
				title: '无加盟费',
				content: '0加盟费用，减少开店投入'
			},
			{
				icon: 'img/xtys-2.png',
				title: '无保证金',
				content: '0保证金，收益自主可控，让创业更轻松'
			},
			{
				icon: 'img/xtys-3.png',
				title: '无抽成',
				content: '0抽成，顾客支付金额全部到商家账户，不收取佣金'
			},
			{
				icon: 'img/xtys-4.png',
				title: '支持独立品牌',
				content: '支持独立品牌经营，自主经营可控'
			},
			{
				icon: 'img/xtys-5.png',
				title: '支持加盟',
				content: '支持多商家管理，可进行加盟商家和店铺管理'
			},
			{
				icon: 'img/xtys-6.png',
				title: '配套服务',
				content: '提供域名/服务器/管理系统/公众号/小程序部署'
			}
			],
			gnzcList: [{
				icon: 'img/gnzc-1.png',
				title: '开店指南',
				content: '我们会提供店铺上架，店铺试运行，开店活动，等经验指南让您快速上手，开店无忧'
			},
			{
				icon: 'img/gnzc-2.png',
				title: '电路走线图',
				content: '提供详细的设备电路安装走线图，无需专业人员，快速上手安装'
			},
			{
				icon: 'img/gnzc-3.png',
				title: '安装视频',
				content: '提供详细的设备安装视频，让您快速学习安装设备，无后顾之忧'
			},
			{
				icon: 'img/gnzc-4.png',
				title: '软装清单/推荐供应商',
				content: '根据不同的风格，提供软装清单和供应商，不用您亲自寻找'
			},
			{
				icon: 'img/gnzc-5.png',
				title: '营销方案',
				content: '提供一线的店铺营销方案，快速打开市场，不管是新手和老手都能游刃有余'
			},
			{
				icon: 'img/gnzc-6.png',
				title: '操作手册',
				content: '系统本身就操作简单易上手，但是我们还是准备详细的小程序、管理后台使用操作使用手册'
			}
			]
		}
	},
	computed: {
		displayedNews() {
			return this.newsInforList.slice(0, 8);
		},

		displayedSuccessCase() {
			return this.successCaseList.slice(0, 8);
		}
	},
	created() {
		document.addEventListener("DOMContentLoaded", function () {
			var hash = window.location.hash;
			if (hash) {
				// 滚动到指定位置
				document.querySelector(hash).scrollIntoView({ behavior: "smooth" });
			}
		});


		if (document.body.clientWidth < 640) {
			this.showconsult = false
		} else {
			this.showconsult = true
		}
		document.body.onresize = () => {
			if (document.body.clientWidth < 640) {
				this.showconsult = false
			} else {
				this.showconsult = true
			}
		}
		this.$nextTick(() => {
			this.slideBanner()
		})

		//轮播图
		request({
			url: '/Manage/TbAdvert/listAll'
		}).then(res => {
			this.bannerList = res.data;
		});
		request({
			url: "/Manage/TbProduct/listAll"
		}).then(res => {
			this.productList = res.data;
		});
		request({
			url: "/Manage/SysConfig/listAll"
		}).then(res => {
			this.config = res.data
			// 设置页面标题
			this.setPageTitle()
			// 设置浏览器图标
			this.setFavicon()
		});
		// request({
		// 	url: "/Manage/TbCase/listAll"
		// }).then(res => {
		// 	this.successCaseList = res.data
		// });
		// request({
		// 	url: "/Manage/TbNew/listAll"
		// }).then(res => {
		// 	this.newsInforList = res.data
		// });
		this.getNewsList()
		this.getSuccessList()
		this.getMoreNewsList()
		this.getMoreSuccessList()
	},
	beforeDestroy() {
		// 确保组件销毁时清除定时器
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	methods: {
		// 首页新闻列表
		getNewsList() {
			request({
				url: '/Manage/TbNew/listAll',
				method: 'get',
				params: {
					weight: 1
				}
			}).then(res => {
				this.newsInforList = res.data
			})
		},
		// 更多新闻列表
		getMoreNewsList() {
			request({
				url: "/Manage/TbNew/listAll"
			}).then(res => {
				this.moreNewsInforList = res.data
			});
		},
		// 首页案例列表
		getSuccessList() {
			request({
				url: '/Manage/TbCase/listAll',
				method: 'get',
				params: {
					weight: 1
				}
			}).then(res => {
				this.successCaseList = res.data
			})
		},
		// 更多案例列表
		getMoreSuccessList() {
			request({
				url: "/Manage/TbCase/listAll"
			}).then(res => {
				this.moreSuccessCaseList = res.data
			});
		},
		getConfig(id, isType) {
			const obj = this.config.find(d => d.id == id)
			if (!obj) return ''
			if (isType) {
				return obj.type + obj.content
			}
			return obj.content
		},
		getConfigTitle(id, isType) {
			const obj = this.config.find(d => d.id == id)
			if (!obj) return ''
			if (isType) {
				return obj.content
			}
			return obj.content
		},
		// 设置浏览器标题
		setPageTitle() {
			const obj = this.config.find(d => d.id == 30)
			if (!obj) return ''
			return document.title = obj.content + ' | 无人空间管理系统_无人棋牌室_无人茶室_无人自习室'
		},
		// 设置浏览器图标
		setFavicon() {
			const iconObj = this.config.find(d => d.type === 'iconUrl')
			if (!iconObj || !iconObj.imageUrl) return
			
			// 移除现有的 favicon link
			const existingFavicon = document.querySelector('link[rel="icon"]') || document.querySelector('link[rel="shortcut icon"]')
			if (existingFavicon) {
				existingFavicon.remove()
			}
			
			// 创建新的 favicon link
			const link = document.createElement('link')
			link.rel = 'icon'
			link.type = 'image/x-icon'
			link.href = iconObj.imageUrl
			
			// 添加到 head 中
			document.head.appendChild(link)
		},
		// 设置图片
		setImage() {
			const obj = this.config.find(d => d.type == 'qrCodeQF')
			if (!obj || !obj.imageUrl) return
			return obj.imageUrl
		},
		carouselItemShow(carouselName, index) {
			console.log('carouselItemShow', carouselName, index)
			this[carouselName + 'Index'] = index
		},
		clickTab(tabName, index) {
			console.log('clickTab', tabName, index)
			// this[tabName + 'Index'] = index
			this.$refs[tabName + 'Carousel'].setActiveItem(index)
		},
		slideCarousel(carousel, upX) {
			let that = this
			const moveX = that[carousel + 'TouchX'] - upX
			if (that[carousel + 'TouchX'] > 0 && moveX > 0) {
				console.log('slideCarousel', moveX, that.$refs[carousel + 'Carousel'])
				// that.$refs[carousel + 'Carousel'].prev()
				that.$refs[carousel + 'Carousel'].next()
				that[carousel + 'TouchX'] = -1
			} else if (that[carousel + 'TouchX'] > 0 && moveX < 0) {
				console.log('slideCarousel', moveX, that.$refs[carousel +
					'Carousel'])
				// that.$refs[carousel + 'Carousel'].next()
				that.$refs[carousel + 'Carousel'].prev()
				that[carousel + 'TouchX'] = -1
			}
		},
		callPhone(telConent) {
			console.log('callPhone', telConent)
			const a = document.createElement("a");
			a.href = "tel:" + telConent
			a.click()
		},
		// 轮播手滑切换
		slideBanner() {
			let that = this
			let carouselList = ['rjjmUser', 'rjjmMp', 'rjjmAdmin']
			for (let i in carouselList) {
				console.log('carouselList', '.' + carouselList[i] + 'Carousel')
				var box = document.querySelector('.' + carouselList[i] + 'Carousel')
				box.addEventListener('mousedown', function (e) {
					that[carouselList[i] + 'TouchX'] = e.clientX
				})
				box.addEventListener('touchstart', function (e) {
					that[carouselList[i] + 'TouchX'] = e.changedTouches[0].clientX
				})
				box.addEventListener('touchend', function (e) {
					that.slideCarousel(carouselList[i], e.changedTouches[0].clientX)
				})
				box.addEventListener('mouseleave', function (e) {
					that.slideCarousel(carouselList[i], e.clientX)
				})
				box.addEventListener('mouseup', function (e) {
					that.slideCarousel(carouselList[i], e.clientX)
				})
			}
		},
		async sendVerificationCode() {
			// 检查是否填写手机号
			if (!this.formData.cusPhone) {
				alert('请先输入手机号');
				return;
			}

			// 如果在倒计时中，不执行操作
			if (this.isCountingDown) return;

			try {
				// 调用接口发送验证码请求
				const response = await request({
					url: '/Sms/send',
					method: 'get',
					data: { phone: this.formData.cusPhone }
				});
				console.log(response);

				if (response.data.code === 0) {
					alert(response.data.data);

					// 开始倒计时
					this.isCountingDown = true;
					this.countdown = 60;

					// 启动倒计时
					this.timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown--;
						} else {
							this.isCountingDown = false;
							clearInterval(this.timer);
						}
					}, 1000);
				} else {
					alert(response.data.msg || '发送验证码失败');
				}
			} catch (error) {
				alert('发送验证码失败，请稍后重试');
				console.error(error);
			}
		},
		async submitForm() {
			try {
				// 检查必填字段
				if (!this.formData.cusIntention || !this.formData.cusProject || !this.formData.cusAddress || !this.formData.cusName || !this.formData.cusPhone || !this.formData.verifyCode) {
					alert("请填写所有必填信息！");
					return;
				}

				const formDataToSend = {
					...this.formData,
					cusProject: this.formData.cusProject.join(',')
				};
				// 发起 POST 请求到后端
				const response = await request({
					url: '/Manage/TbCustomer/save',
					method: 'post',
					data: formDataToSend
				});

				// 处理响应
				if (response.data.code === 0) {
					alert("提交成功！");
					this.formData = {
						cusProject: [],
						cusIntention: '',
						cusAddress: '',
						cusName: '',
						cusPhone: '',
						verifyCode: '',
					};
					UIkit.modal('#modal-example').hide();
				} else {
					console.log(response);
					alert(response.data.msg);
				}
			} catch (error) {
				console.error("提交出错：", error);
				alert("提交过程中出现错误，请重试！");
			}
		},
	}
});
